<template>
  <div class="range-input">


     <span class="card-icon">
        <i :class="icon"></i>
     </span>
    <span class="card-title">{{title}}</span>
    <el-input
      v-model="minValue"
      placeholder="最小值"
      size="small"
      @input="onInput('min')"
      :style="{ width: inputWidth }"
      class="range-input__field"
    ></el-input>
    <span class="range-input__separator">至</span>
    <el-input
      v-model="maxValue"
      placeholder="最大值"
      size="small"
      @input="onInput('max')"
      :style="{ width: inputWidth }"
      class="range-input__field"
    ></el-input>
  </div>
</template>

<script>
export default {
  name: "RangeInput",
  props: {
    icon: { type: String, default: "el-icon-edit" },
    title: { type: String, default: "标题" },
    value: {
      type: Array,
      default: () => ["", ""]
    },
    inputWidth: {
      type: String,
      default: "50px" // 可自定义输入框宽度
    }
  },
  data() {
    return {
      minValue: this.value[0],
      maxValue: this.value[1]
    };
  },
  watch: {
    value(newVal) {
      this.minValue = newVal[0];
      this.maxValue = newVal[1];
    }
  },
  methods: {
    onInput(type) {
      let val =
        type === "min" ? this.minValue.replace(/\D/g, "") : this.maxValue.replace(/\D/g, "");
      if (type === "min") this.minValue = val;
      else this.maxValue = val;
      this.$emit("input", [this.minValue, this.maxValue]);
    }
  }
};
</script>

<style scoped>
.range-input {
  display: inline-flex; /* 保持和 el-input 一样的 inline 效果，不会换行 */
  align-items: center;
  border: 1px solid #DCDFE6;
  border-radius: 4px;
  margin: 0 5px;

}

.range-input__field >>> .el-input__inner {
  border: none;          /* 去掉边框 */
  box-shadow: none;      /* 去掉阴影 */
  height: 32px;          /* ElementUI el-input 默认高度 (small 尺寸) */
  line-height: 32px;
  text-align: center;

}


.range-input__separator {
  margin: 0 5px;
  color: #606266;
  font-size: 14px;
}

.card-icon {
  font-size: 18px;
  color:#C0C4CC;
  margin-left: 10px;
  margin-top: 3px;
}

.card-title{
  font-size: 14px;
  color: #C0C4CC;
  margin-left: 5px;
}
</style>
